<template>
  <a-config-provider :locale="zhCN">
    <router-view> </router-view>
  </a-config-provider>
</template>

<script setup lang="ts">
  import { useUserInfoStoreWithOut } from './stores/modules/userInfo';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';

  const router = useRouter();
  const { getPermissions, getToken, getUserName } = storeToRefs(useUserInfoStoreWithOut());

  router.beforeEach((to, _from, next) => {
    if (to.meta.name) {
      document.title = to.meta.name as string;
    }

    if (!getToken.value && to.path !== '/login' && to.name !== '404') {
      next({ name: 'login' });
      return;
    }
    if (to.path === '/login') {
      if (getToken.value && getUserName.value) {
        next({ name: 'results' });
        return;
      } else {
        next();
        return;
      }
    }
    // 如果不需要权限就直接进入
    if (to.meta?.permissions) {
      if (getToken.value === '') {
        next('/login');
        return;
      }
      // 判断权限 权限符合就进入，不符合就跳转到403页面
      if (
        getPermissions.value.includes(to.meta.permissions as string) ||
        getPermissions.value[0] === '超级管理员'
      ) {
        next();
        return;
      } else {
        next({ name: '403' });
        return;
      }
    } else {
      next();
      return;
    }
  });
</script>

<style>
  @import '@/assets/css/transition.css';
  body,
  html,
  #app {
    width: 100%;
    height: 100%;
  }
  #app {
    overflow-x: hidden;
  }

  .ant-drawer-header,
  .ant-drawer-body {
    @apply dark:(bg-[#1f1f1f] border-gray-600);
  }
  .ant-drawer-title,
  .ant-drawer-header .anticon {
    @apply dark:text-light-50;
  }
  .ant-drawer-header .anticon {
    vertical-align: 1px !important;
  }
  .ant-select-dropdown {
    @apply dark:bg-[#1d1d1d];
  }
  .ant-select-item {
    @apply dark:text-light-50;
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    @apply dark:(bg-[#2b2b2b] text-light-50);
  }
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    @apply dark:bg-[#2b2b2b];
  }
  #app::-webkit-scrollbar {
    width: 0;
  }
  .ant-message .anticon {
    vertical-align: 2px;
  }
  :deep(.ant-drawer-body) > :deep(.ant-checkbox-group) {
    @apply flex flex-col gap-2;
  }
  .ant-checkbox-wrapper {
    @apply dark:text-light-900;
  }

</style>
